import React, { useEffect, useState } from 'react'
import { HomeApi } from '@/request/api';
import { useSelector } from "react-redux"
import "./Home.less"
//import { AccessAlarm, ThreeDRotation } from '@mui/icons-material';
import ArrowRightIcon from '@mui/icons-material/ArrowRight';
import Wolf from "@/assets/images/home/xiaolang.png"
import HomeItem from './HomeItem';
import Img1 from "@/assets/images/home/books.png"
import Img2 from "@/assets/images/home/examination.png"
import Img3 from "@/assets/images/home/practice.png"
import { useNavigate } from 'react-router-dom';

export default function Home() {
  let nav = useNavigate()
  const data = useSelector((state) => state)
  let [title, setTitle] = useState("")//顶部标题
  let [study, setStudy] = useState(0)//已学
  let [itemCount, setItemCount] = useState(0)//总题数
  let [wrong, setWrong] = useState(0)//错题
  let [collect, setCollect] = useState(0)//收藏
  // let [actionCode, setActionCode] = useState("")//学科编码
  let [exemItems, setExemItems] = useState<IExam[]>([])
  const getHome = async () => {
    //1.数据缓存的思路适用于不经常修改
    let homedata = sessionStorage.getItem("homedata")
    // if (homedata) {
    //   let data = JSON.parse(homedata)
    //   setTitle(data.exam.title)
    //   setStudy(data.study)
    //   setItemCount(data.exam.itemCount)
    //   setWrong(data.wrong)
    //   setCollect(data.collect)
    //   setExemItems(data.exemItems)
    // } else {
      let res = await HomeApi()
      console.log(res);
      if (res.errCode === 0) {
        setTitle(res.data.exam.title)
        setStudy(res.data.study)
        setItemCount(res.data.exam.itemCount)
        setWrong(res.data.wrong)
        setCollect(res.data.collect)
        setExemItems(res.data.exemItems)
        sessionStorage.setItem("homedata", JSON.stringify(res.data))
      // }
    }
  }

  useEffect(() => {
    getHome()
    console.log(title);
  }, [])

  return (
    <div className='home'>
      {/* 顶部选择条 */}
      <div className='title'>
        <div className='name'>{title}</div>
        <div className='change' onClick={async () => {
          // console.log(123);

          let res = await HomeApi()
          console.log(res.data.exam.actionCode);
          nav("/subject/" + res.data.exam.actionCode)
        }}>
          切换开始科目
          <ArrowRightIcon></ArrowRightIcon></div>
      </div>
      {/* 顶部选择条end */}
      {/* banner开始 */}
      <div className='banner'>
        <div className='top'>欢迎xxx来到学习库</div>
        <div className='bottom'>
          <div className='img'>
            <img src={Wolf} alt="" />
          </div>
          <div className='data'>
            <div className='data-top'>
              <div>以学{study}题</div>
              <div className='gang'>|</div>
              <div>共{itemCount}道题</div>
            </div>
            <div className='data-bottom'>
              <div>
                <h3>{wrong}</h3>
                <div className='ct'>错题</div>
              </div>
              <div>
                <h3>{collect}</h3>
                <div className='ct'>收藏</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      {/* banner end */}
      {/* 分类 */}
      <div className='type'>
        <img src={Img1} alt="" />
        <img src={Img2} alt="" />
        <img src={Img3} alt="" />
      </div>
      {/* 分类end */}
      {/* 学科题库 */}
      <div className='tiku'>
        <div className='title'>
          <div className='big'>学科题库</div>
          <div className='small'>坚持每一天</div>
        </div>
        {
          exemItems.map((item, index) => {
            return <HomeItem key={index} data={item}></HomeItem>
          })
        }

      </div>
      {/* 学科题库end */}


    </div>
  )
}
